/**
 * 2018/04/20 by xiongisxiong
 */
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { TabNavigator, StackNavigator, TabBarBottom } from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons'


// 底部tab切换的页面引入
import DiscoverMusic from './discovermusic'
import MyMusic from './mymusic';
import Account from './account';
import Friends from './friends';

//  歌曲列表详情、视频播放详情页、用户界面详情页、电台详情页
import { DetailScene, MvDetail, UserDetail, DjDetail } from './detail';
// 音乐播放详情页
import PlayerScene from './player/PlayerScene';
// 音乐播放器 导入了react-nativ-video
import Player from './player/Player'; 

// 与redux以及react-redux有关的
import { Provider } from 'react-redux'
import { createStore } from 'redux';
import reducer from './redux/reducer'

const store = createStore(reducer);
console.log('RootScene.js中store.getState的输出', store.getState())

/** 配置底部标签 */
const Tab = TabNavigator({
  DiscoverMusic: {
    screen: DiscoverMusic,
    navigationOptions: ({navigation}) => ({
      tabBarLabel: '发现音乐',
      tabBarIcon: ({focused, tintColor}) => (
        <Icon name="ios-disc-outline" size={30} color={tintColor} />
      )
    })
  },
  MyMusic: {
    screen: MyMusic,
    navigationOptions: ({navigation}) => ({
        tabBarLabel: '我的音乐',
        tabBarIcon: ({ focused, tintColor }) => (
          <Icon name="ios-musical-notes-outline" size={30} color={tintColor} />
        )
    })
  },
  Friends: {
    screen: Friends,
    navigationOptions: ({navigation}) => ({
      tabBarLabel: '朋友',
      tabBarIcon: ({focused, tintColor}) => (
        <Icon name="ios-contacts-outline" size={30} color={tintColor} />
      )
    })
  },
  Account: {
    screen: Account,
    navigationOptions: {
        tabBarLabel: '账号',
        tabBarIcon: ({ focused, tintColor }) => (
            <Icon name="ios-person-outline" size={30} color={tintColor} />
        )
    }
  }
},{
  tabBarComponent: TabBarBottom,
  tabBarPosition: 'bottom',
  animationEnabled: true,
  awiperEnables: true,
  initialRouteName: 'DiscoverMusic',
  lazy: true,
  tabBarOptions: {
    activeTintColor: '#fff',
    inactiveTintColor: '#ccc',
    style: {
      backgroundColor: '#333'
    }
  }
})

const Navigator = StackNavigator(
  {
    Tab: {screen: Tab},
    Detail: {screen: DetailScene},
    UserDetail: {screen: UserDetail},
    Player: {screen: PlayerScene},
    MvDetail: {screen: MvDetail}
  },
  {
    navigationOptions: {
      headerBackTitle: '返回',
      headerTintColor: '#333',
      showIcon: true
    }
  }
)

class RootScene extends Component {
  render() {
    return (
      // <Navigator />
      <Provider store={store}>
        <View style={{flex: 1}}>
          <Navigator />
          <Player />
        </View>
      </Provider>
    )
  }
}

export default RootScene